<template>
  <div class="pmyo" >
     <ul  v-for="user in users" :key="user.userId">
      <div id="pmyhead"> <img :src="getpic(user.headPic)" alt></div>
            <li >
              <span>昵称:{{user.userName}}</span>
            </li>
            <li >
              <span>生日:{{user.birthday}}</span>
            </li>
            <li >
              <span>手机号:{{user.telephone}}</span>
            </li>
            <li >
              <span>性别:{{user.sex}}</span>
            </li>
            <!-- <li >
              <span>email:{{user.email}}</span>
            </li> -->
          </ul>
  </div>
</template>
<script>
export default {
  name:"users",
  data(){
    return{
      users : []
    };
  },
  methods:{
    getpic(pic){
      let path = "http://localhost:3000/upload/"+pic
      return path
    }

  },
  created(){
    this.$axios.get("http://localhost:3000/users/user")
    .then(res => {
      console.log("查询结果是：");
      console.log(res.data.data);
      this.users=res.data.data
      // console.log(user.userName);
    })
    .catch(err => {
      console.log("错误信息"+err)
    })
  },
}
</script>
<style lang="css" scoped>
.pmyo{
  width: 400px;
  height: 380px;
  position:absolute;
  left:25%;
  top:30%;
  margin-left:200px;
  margin-top:-40px;
  border-radius: 5px;
  /* background-color: #ff9; */
  padding:20px 50px 10px 10px;
}
#pmyhead img{
  width: 100px;
  height: 100px;
border-radius: 120px
}
#pmyhead {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-radius: 120px

}
.pmyo ul li{
  margin-left: 0;
  margin: 0 auto;
}
</style>
